<template>
   <div>
         <GlobalCardBox  title="申述" :showDown="SETAPPEAL" :contontStyle="AppealStyle">
            <div slot="content" id="content" >
               <div class="flex detail"> 
                   <div class="box  overflow">申述类型:{{AppealData?.appealInfo}}</div>
                   <div class="box  overflow">申述作者:{{AppealData?.username}}</div>  
                   <div class="box  overflow">申述文章:{{AppealData?.title}}</div>  
                </div>                  
               <div class="frame">
                <textarea  id="contentInput"  v-model="content" @input='getContentLength($event.target)' maxlength="150"
                           placeholder="请输入申述内容"/>    
                  
                  <!-- 图片 -->
               
                     <el-upload
                        class="avatar-uploader flex"
                        v-model="image"
                        :headers="headers" 
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :on-error="handleError"
                        :before-upload="beforeAvatarUpload"
                        :limit='9' 
                        :multiple="true"
                        :file-list="imageList"
                        action="/api/File/upload/image/AppealImage"
                        ref="imageList"
                        list-type="picture-card">   
                        <i class="el-icon-plus"></i>
                     </el-upload>                
               </div>
               <div class="buttonBox flex">
                  <el-button round class="button" icon="el-icon-position" @click="appeal">申述</el-button>
               </div>
            </div>
         </GlobalCardBox>
   </div>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import common from '@/common/global'
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
    components: { GlobalCardBox },
     name :'', 
     computed:{
        ...mapState('Report',['AppealInfo']),
        AppealData(){
           return this.AppealInfo.appeal
        },
      
     },
       data() {
         return {
            AppealStyle:{
               height:'700px'
            },
            content:'',
            image:'',
            imageList:[],
            headers:{
                token:localStorage.getItem("token")
            },
            ImageUrls:[]
         }
        },
     methods:{
        ...mapMutations('Report',['SETAPPEAL']),
        ...mapActions('Report',['addAppeal']),
         getContentLength(e) {
		    this.content = e.value.trimLeft()
          this.content = common.filterSensitiveInfo(this.content)
		 },
         /*删除图片*/
        handleRemove(file) { 
          if(file.type == 1) return   this.ImageUrls = this.ImageUrls.filter(item => item != file.url)
          let res = file.response
          this.ImageUrls = this.ImageUrls.filter(item => item != res.data)
        },
        handleError(file){
         this.$message.error('未知错误');
       },
         handleAvatarSuccess(res) {
            if(res.type=='error') return this.$message.error('未知错误');
            this.image = res.data;
            this.ImageUrls.push(res.data);

        },
        //上传图片前做一些限制
         beforeAvatarUpload(file) {
            const whiteList = ["image/jpeg", "image/png"];
            if (whiteList.indexOf(file.type) === -1) {
               this.$message.error('上传文件类型只能是 image/jpeg, image/png ');
               return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) this.$message.error('上传图片大小不能超过 5MB!');
            return isLt2M;
        },
        async appeal(){
          if(this.content == null || this.content == '')
             return this.$message.error('请输入申述内容')
           let requestData = {content:this.content,...this.AppealData}
           if(this.ImageUrls.length>0)
           requestData.image = this.ImageUrls.toString()
           let res = await this.addAppeal(requestData)
            if(res.code == -1){
                 this.SETAPPEAL()
                 this.$public.toLogin()
                 return
             }
             if(res.code !=200) return this.$message.error(res.message)
      
             this.$message.success(res.message)
             this.SETAPPEAL()


        }
     }
  }
</script>
<style scoped lang='less'>
/* upload样式 */

::v-deep .el-upload-list__item-thumbnail{ //图片
   object-fit: cover !important;
}

::v-deep .el-upload{  //每个盒子
    border: 2px solid var(--GeneralBackColor);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
}
::v-deep .el-upload:hover{
   border: 2px solid var(--GeneralBackColor);
}

.avatar-uploader{
    border-radius: 6px;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    
    i{
      font-size: 50px;
    }
}
.detail{
   width: 100%;
   justify-content: flex-start;
}
.box{
   padding: 0 10px;
   height: 50px;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 5px;
   color: gray;
   margin-right: 20px;
   margin-bottom: 20px;
   max-width: 300px;
   line-height: 50px;
}
.frame{
  
    margin-bottom: 20px;
   width: 100%;
   height: 480px;
    background: rgba(255, 255, 255, 0.5);
   border-radius: 5px;
   padding: 10px;
   box-sizing: border-box;
}
#contentInput{
   width: 100%;
   height:300px;

   font-size: 16px;
}
.buttonBox{
   width: 100%;
   box-sizing: border-box;

  
   background: var(--GeneralBackColor-half);


   .button{
      color: white;
      border:none;
      width: 80%;
      background: var(--GeneralBackColor);
   }
}
</style>